<template>
  <div class="login" v-on:click.self="clickBox($event)">
    <div class="loginBox">
		<div class="main">
			<h1 class="login_title">Happy World</h1>
			<ul>
				<li class="form-item">
					<input 
						type="text" 
						placeholder="用户名" 
						class="username"
						v-on:click="showPasInpt()"
						v-model="userInt"> 
					<button type="button" class="el-button trans register" v-on:click="loginBtn">
						<span>一键登入</span>
					</button>
				</li>
				<li class="form-item">
					<input 
						type="password" 
						placeholder="密码" 
						class="password trans"
						v-model="pasInt" 
						v-bind:class="{heightHide: showPasInp}"/>
				</li>
			</ul>
		</div>
   </div>
   <!--<pagehome :list="list"></pagehome>-->
  </div>
</template>

<script>
	import pagehome from './pagehome'
//	var data = [
//		{
//			title:"第一级菜单",
//			child:[
//				{
//					title:2,
//					child:[
//						{
//							title: 3
//						}
//					]
//				},
//				{
//					title:2
//				}
//			]
//		},
//		{
//			title:"第一级菜单",
//			child:[
//				{
//					title:2,
//					child:[
//						{
//							title: 3
//						}
//					]
//				},
//				{
//					title:2
//				}
//			]
//		}
//	]
	export default {
	  name: 'login',
	  components: {
	  	pagehome
	  },
	  data () {
	    return {
	      showPasInp: true,//密码框的显示与隐藏
	      userInt: '',//用户名
	      pasInt: '',//密码
	      isActive_name: false,//用户名错误信息提示
	      isActive_pas: false //密码错误信息提示,
//	      list:data
	    }
	  },
	  methods: {
	  	clickBox (event){
	  		var nameVal = this.userInt;//用户名
			var pasVal = this.pasInt;//密码值
//			console.log(this.$el.className)
	  		if(!nameVal && !pasVal && this.$el.className == 'login'){
	  			this.showPasInp = true;
	  		}
	  	},
	  	showPasInpt () {//点击用户名框
	  		this.showPasInp = false;
	  	},
	  	loginBtn (){//一键登入事件
	  		var nameVal = this.userInt;//用户名
			var pasVal = this.pasInt;//密码值
//			console.log(nameVal, pasVal)
			if(nameVal || pasVal){
	  			if(/^(?![^a-zA-Z]+$)(?!\D+$).{6,15}$/.test(nameVal) && /^\d{6,15}$/.test(pasVal)){
	  				//输入用户名符合规范 && 输入密码符合规范
					this.$router.push({ path: '/pagehome' });
				};
	  			if(!/^(?![^a-zA-Z]+$)(?!\D+$).{6,15}$/.test(nameVal)){//输入用户名不符合规范
					alert("警告：用户名由6-15位数字、英文字母或下划线和中文组成的字符串")
				};
				if(!/^\d{6,15}$/.test(pasVal)){//输入密码错误
					alert('警告：密码仅限于6-15位数字')
				};
	  		}else{
	  			this.showPasInp = true;
	  			alert('警告：请输入用户名和密码登陆')
	  		};
	  	}
	  }
	}
	
	
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login{
	width: 100%;
	height: 100%;
	background: url(../image/jiguang01.jpeg) no-repeat center center;
	background-size: 100% 100%;
	overflow: hidden;
	position: relative;
}
.loginBox{
	width: 280px;
    position: fixed;
    top: 0;
    left: 100px;
    bottom: 0;
}
.main{
	width: 100%;
    height: 170px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.login_title{
    color: #fff;
    font-size: 24px;
    margin: 12px 0;
    text-align: left;
}
.username {
    position: relative;
}
.el-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    text-align: center;
    outline: 0;
    padding: 10px 15px;
    font-size: 14px;
    color: #fff;
    background-color: #20a0ff;
}
.main input[type=password], .main input[type=text] {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: 0 1px 3px #666;
    -moz-box-shadow: 0 1px 3px #666;
    box-shadow: 0 1px 3px #666;
    padding: 0 10px;
}
.register {
    border-radius: 0;
    height: 50px;
    position: absolute;
    top: 52px;
    right: -85px;
    border: none;
    vertical-align: top;
}
.trans {
    -o-transition: all .3s ease,.3s ease;
    -ms-transition: all .3s ease,.3s ease;
    -moz-transition: all .3s ease,.3s ease;
    -webkit-transition: all .3s ease,.3s ease;
}
.el-button:hover{
	background: #6db6ec;
}
.heightHide{
	height: 0!important;
}
</style>
